<template>
	<view class="userinfo">
		<custom-navi :show-home="false" background='rgba(0, 144, 250, 1)'>个人信息</custom-navi>
		<view class="userinfo-img">
			<view class="title">头像</view>
			<view class="icon">
				<view class="icon-img"><image src="/static/icon/head.jpg" mode=""></image></view>
				<view class="icon-right"><image src="/static/ic/rightHui.png" mode=""></image></view>
			</view>
		</view>
		<view class="userinfo-firm">
			<view class="title">所属公司</view>
			<view class="right">广州市公司</view>
		</view>
		<view class="userinfo-firm" @tap="codeBtn">
			<view class="title">我的推广码</view>
			<view class="rights">
				<view class="rights-img"><image src="/static/ic/codeRed.png" mode=""></image></view>
				<view class="rights-icon"><image src="/static/ic/rightHui.png" mode=""></image></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				
			}
		},
		onLoad() {
			
		},
		methods:{
			codeBtn(){
				uni.navigateTo({
					url:"../popularizeCode/index"
				})
			}
		}
	}
</script>

<style lang="scss">
	.userinfo{
		&-firm{
			width:100%;
			height:80rpx;
			background:rgba(255,255,255,1);
			padding:0 32rpx;
			opacity:1;
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			.title{
				font-size:28rpx;
				font-family:PingFang SC;
				font-weight:bold;
				color:rgba(80,80,80,1);
				opacity:1;
			}
			.right{
				font-size:28rpx;
				font-family:PingFang SC;
				font-weight:400;
				color:rgba(80,80,80,1);
				opacity:1;
				margin-left: auto;
			}
			.rights{
				display: flex;
				margin-left: auto;
				&-img{
					width: 30rpx;
					height: 30rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				&-icon{
					width: 30rpx;
					height: 30rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		&-img{
			width:100%;
			height:140rpx;
			background:rgba(255,255,255,1);
			opacity:1;
			display: flex;
			align-items: center;
			padding: 0 32rpx;
			.title{
				font-size:28rpx;
				font-family:PingFang SC;
				font-weight:bold;
				color:rgba(80,80,80,1);
				opacity:1;
			}
			.icon{
				margin-left: auto;
				display: flex;
				align-items: center;
				&-img{
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					overflow: hidden;
					margin-right: 18rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				&-right{
					width:40rpx;
					height:40rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
</style>
